<template>
  <div class="container_lifesearch clearfix">
    <scroll-view
      :scroll-y="true"
      :style="{'height': '100%'}"
      @scroll="scroll"
      @scrolltolower="pullrefresh"
    >
      <div class="mask" v-if="ispop" @click="ispop = false"></div>
      <div class="boxpop" v-if="ispop">
        <div class="checkbox">
          <sorting @getVal="getTypeId" :beautytype="beautytype"></sorting>
          <div class="son">
            <ul class="leftlist">
              <li
                v-for="(item,index) in items"
                :key="index"
                :class="{'active':leftCurrent == index}"
                class="item"
                @click="getLeft(index,item)"
              >{{item.name}}</li>
            </ul>
            <ul class="leftlist right">
              <li
                v-for="(item,index) in rightData"
                :key="index"
                class="item1"
                :class="{'active':rightCurrent == index}"
                @click="getRight(index,item)"
              >{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="contentbox">
        <div class="top">
          <div class="inpform">
            <input
              type="search"
              @confirm="toSearch"
              confirm-type="search"
              class="inp"
              v-model="key"
              placeholder="请输入搜索内容"
            />
            <img :src="ImgBaseUrl+'h5_images/mp_images/3.1/chaxun.png'" alt class="icon" />
            <span class="cannel" @click="toindex">取消</span>
          </div>
        </div>
        <div class="sortbox" v-if="mark1">
          <sorting @getVal="getTypeId" :sortText1="sortText" :num1="num" :beautytype="beautytype"></sorting>
        </div>
        <div class="content" v-if="!mark1 && list.length > 0 && shoplist.length<1">
          <p class="p1">
            搜索历史
            <img
              :src="ImgBaseUrl+'h5_images/lifebeauty/search/del.png'"
              alt
              class="icon"
              @click="delEvent"
            />
          </p>
          <ul class="ul">
            <li
              class="li"
              v-for="(item,index) in list"
              :key="index"
              @click="checkEvent(item)"
            >{{item}}</li>
          </ul>
        </div>

        <div class="listbox">
          <shoplist :shoplist="shoplist" v-if="!empty"></shoplist>
          <!-- <shoplist class="shop" :shoplist="shoplist"></shoplist> -->
          <img
            src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/kongjiemian1@2x.png"
            alt
            v-if="empty "
            class="empty"
          />
          <div class="text" v-if="empty">没有找到宝宝想看的内容要不换个词儿再搜搜</div>
          <!-- <div class="emptybox" v-if="!upLoading">
        <div class="emptymsg">
          <span class="line"></span>
          没有更多了
          <span class="line"></span>
        </div>
          </div>-->
        </div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import shoplist from "@/components/life_list/life_list";
import sorting from "@/components/sort1/sort1";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      ImgBaseUrl: common.image_response, //img 域名
      val: "",
      list: [],
      level: 1,
      key: "",
      // category_id: 1,
      lng: "",
      lat: "",
      page: 1,
      district_id: "",
      city_id: "",
      province_id: 13,
      type: "", //智能筛选里面的类型
      shoplist: [],
      id: "",
      mark1: "", //mark为空表示为搜索页   不为空表示二级分类页
      ispop: false,
      items: [],
      rightData: [],
      leftCurrent: -1,
      mark: "", //智能排序点击到第几个
      popData: [],
      rightCurrent: -1,
      most: "",
      popleftData: [], //弹窗最左边的数据
      isbottom: false,
      empty: false,
      sortText: "",
      num: "",
      upLoading: true,
      res: "",
      val: "",
      beautytype: ""
    };
  },
  onLoad(options) {
    // console.log(options)
    if (options.mark1) {
      wx.setNavigationBarTitle({
        title: ""
      });
    } else {
      wx.setNavigationBarTitle({
        title: "搜索"
      });
    }

    Object.assign(this.$data, this.$options.data());
    if (options.mark1) {
      // this.mark1 = options.mark1 ? true : false;
      //二级分类页
      this.id = options.id ? options.id : "";
      this.level = options.level ? options.level : 1;
      this.beautytype = options.typename ? options.typename : "美容";
      var that = this;
      // console.log(options.typename)

      wx.setStorageSync("typename_life", that.beautytype);
      console.log(wx.getStorageSync("typename_life") + "---160");

      that.getShopList();
    }
    if (wx.getStorageSync("searchlist")) {
      this.list = JSON.parse(wx.getStorageSync("searchlist"));
    }
    this.mark1 = options.mark1;
    // console.log(this.val)
    this.getPopData();
    this.getCategory();
  },
  methods: {
    getShopList() {
      if (this.isbottom) {
        return false;
      }
      var obj = {
        key: this.key,
        category_id: this.id - 0,
        lng: this.lng,
        lat: this.lat,
        page: this.page,
        district_id: this.district_id - 0,
        city_id: this.city_id - 0,
        province_id: this.province_id,
        type: this.most
      };
      common.fly_post("api/v4_2/life_shop/shop_list", obj, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (this.page == 1) {
          this.shoplist = res.data;
          //  console.log( this.shoplist)
        } else if (res.data.length > 0 && this.page > 1) {
          // console.log(this.shoplist);
          this.shoplist = this.shoplist.concat(res.data);
        } else if (this.page > 1 && res.data.length == 0) {
          this.isbottom = true;
          // this.upLoading = false;
          common.mmk_Loading(2, "没有更多了");
        }
        if (res.data == "" && this.page == 1) {
          this.empty = true;
        } else {
          this.empty = false;
        }
      });
    },
    toindex() {
      wx.navigateBack({
        delta: 1
      });
    },
    toSearch(e) {
      // document.activeElement.blur();
      if (this.list.indexOf(this.key) == -1) {
        this.list.push(this.key);
        console.log(this.list);
        var str = JSON.stringify(this.list);
        wx.setStorage({
          key: "searchlist",
          data: str
        });
        //  console.log(wx.getStorageSync('searchlist'))
      }
      this.page = 1;
      this.isbottom = false;
      this.getShopList();
    },
    delEvent() {
      this.list = [];
      wx.setStorage({
        key: "searchlist",
        data: ""
      });
    },
    checkEvent(e) {
      this.key = e;
      this.getShopList();
    },
    getTypeId(e) {
      if (e.id == 1) {
        this.items = this.popleftData;
        this.rightData = [];
        this.mark = 1;
      } else if (e.id == 2) {
        this.items = this.popData.city;
        console.log(this.popData);
        if (this.popData.length > 0) {
          this.rightData = this.items[0].area;
        }
        this.mark = 2;
      } else if (e.id == 3) {
        this.items = this.popData.order_by;
        this.rightData = [];
        this.mark = 3;
      }
      this.ispop = true;
    },
    getCategory() {
      common.fly_post(
        "api/v4_2/life_category/category_list",
        {
          level: 1,
          is_top: 0
          // parent_id: this.id
        },
        res => {
          // console.log(res);
          if (res.data.status_code == 0) {
            console.log(res.data.data);
            this.popleftData = res.data.data;
            this.items = this.popleftData;
            // console.log(this.items);
            // return res.data.data;
            // this.level1 = res.data.data;
          }
        }
      );
    },
    //弹窗数据
    getPopData() {
      common.fly_post(
        "api/v4_2/life_shop/shop_screen",
        {
          province_id: this.province_id
        },
        res => {
          common.mmk_Loading(1);
          // let res = msg.data;
          console.log(res);
          if (res.data && res.data.status_code == 0) {
            this.popData = res.data.data;
            // console.log(this.popData);
            this.items = res.data.data.city;
            this.rightData = this.items[0].area;
          }
        }
      );
    },
    getLeft(index, item) {
      this.leftCurrent = index;
      this.rightData = item.area;
      this.rightCurrent = -1;
      console.log(item);
      if (this.mark == 3) {
        this.most = item.id;
        this.sortText = item.name;
        this.getShopList();
        //  console.log(this.most)
      } else if (this.mark == 2) {
        this.city_id = item.id;
        // console.log(this.city_id)
      } else if (this.mark == 1) {
        this.beautytype = item.name;
        this.id = item.id;
        this.getShopList();
      }
      this.isbottom = false;
      this.page = 1;
      if (this.mark !== 2) {
        this.ispop = false;
      }
    },
    getRight(index, item) {
      this.rightCurrent = index;
      this.ispop = false;
      // console.log(item);
      this.district_id = item.id;
      // console.log(this.district_id);
      this.isbottom = false;
      this.page = 1;
      this.ispop = false;
      if (this.mark == 2) {
        this.num = item.name;
      }
      this.getShopList();
    },
    pullrefresh(e) {
      this.page++;
      this.getShopList();
    }
  },
  watch: {
    mark1(newVal) {
      this.mark1 = newVal;
      // console.log(this.mark1)
      this.$forceUpdate();
    }
    // beautytype(newVal){
    //   this.beautytype = newVal
    // }
  },
  computed: {
    mark1() {
      return this.mark1;
    },
    beautytype() {
      console.log(this.beautytype);
      return this.beautytype;
    }
  },
  components: {
    shoplist,
    sorting
  }
};
</script>

<style lang="less" scoped>
.container_lifesearch {
  width: 100%;
  box-sizing: border-box;
  font-family: "PingFangSC-Medium", "PingFangSC";
  height: 100%;
  background-color: rgba(243, 244, 246, 1);
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    .span {
      width: 100%;
      height: 40px;
      background: #fff;
      position: fixed;
      top: 48%;
      left: 0;
      border-radius: 10px 10px 0px 0px;
      z-index: 99;
    }
  }
  .boxpop {
    width: 100%;
    height: 51%;
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    z-index: 9999;
    border-radius: 8px 8px 0 0;
    .checkbox {
      width: 100%;
      height: 100%;
      position: relative;
      .navstyle {
        width: 100%;
        position: absolute;
        top: 8px;
        left: 0;
        z-index: 9999;
        background: #fff;
      }
      .son {
        width: 100%;
        height: 100%;
        display: flex;
        .leftlist {
          width: 50%;
          color: #1d2023;
          font-size: 14px;
          display: inline-block;
          overflow: scroll;
          .item {
            height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            line-height: 40px;
            &.item:nth-last-of-type(1) {
              margin-bottom: 40px;
            }
            &.active {
              position: relative;
              font-weight: bold;
              background: #f5f6fa;
              &::after {
                content: "";
                position: absolute;
                width: 2px;
                height: 20px;
                background: rgba(236, 88, 139, 1);
                top: 28%;
                left: 0;
              }
            }
          }
          &.right {
            height: auto;
            overflow: scroll;
            .item1 {
              height: 40px;
              box-sizing: border-box;
              padding-left: 15px;
              line-height: 40px;
              background: #f5f6fa;
              &.item1:nth-last-of-type(1) {
                margin-bottom: 40px;
              }
              &.active {
                color: #ec588b;
                //  left: -200000px;
              }
            }
          }
        }
      }
    }
  }
  .contentbox {
    .top {
      height: 44px;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 0 15px;
      background-color: #fff;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
      z-index: 999;
      position: sticky;
      top: 0;
      .inpform {
        width: 100%;
        height: 100%;
        display: flex;
      }
      .inp {
        width: 85.53%;
        height: 32px;
        background: rgba(244, 244, 244, 1);
        border-radius: 16px;
        // margin: 0 auto;
        margin-top: 6px;
        color: #999;
        font-size: 14px;
        box-sizing: border-box;
        padding-left: 36px;
        &.inp1 {
          width: 92%;
          margin-left: 25px;
        }
      }
      .icon {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 26%;
        left: 25px;
      }
      .cannel {
        width: auto;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #333333;
        padding: 6px 0 6px 15px;
      }
    }
    .sortbox {
      position: sticky;
      top: 44px;
      z-index: 999;
      position: sticky;
    }
    .content {
      width: 100%;
      padding: 20px 15px 10px;
      box-sizing: border-box;
      .p1 {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
        position: relative;
        .icon {
          position: absolute;
          width: 16px;
          height: 16px;
          display: inline-block;
          top: 10%;
          right: 0;
          &.icon1 {
            width: 20px;
            height: 12px;
          }
        }
      }
      .ul {
        height: auto;
        .li {
          width: auto;
          height: 30px;
          line-height: 30px;
          color: #666;
          font-size: 12px;
          background: rgba(231, 231, 231, 1);
          border-radius: 15px;
          display: inline-block;
          padding: 0 10px;
          margin: 0 10px 10px 0;
        }
      }
    }
  }
  .listbox {
    width: 100%;
    text-align: center;
    .empty {
      width: 130px;
      height: 115px;
      margin: 0 auto;
      margin-top: 20%;
    }
    .text {
      // display: inline-block;
      width: 150px;
      font-size: 14px;
      color: #999999;
      margin: 0 auto;
      line-height: 20px;
    }
    .emptybox {
      background: #fff;
      width: 100%;
      padding: pTR(30) 0;
      box-sizing: border-box;
    }
    .emptymsg {
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: #a4b2c1;
      line-height: pTR(40);
    }
    .line {
      content: "";
      display: inline-block;
      width: 100%;
      height: pTR(2);
      background: #a4b2c1;
      vertical-align: middle;
    }
  }
  .box {
    width: 100%;
    height: 100%;
    position: relative;
    .navstyle {
      position: fixed;
      top: 51%;
      left: 0;
      z-index: 999;
      background: #fff;
    }
  }
  .span {
    width: 100%;
    height: 1rem;
    background: #fff;
    position: fixed;
    top: 48%;
    left: 0;
    border-radius: 10px 10px 0px 0px;
    z-index: 99;
  }
}
</style>



